<template>

    <div>

            <li >
                    <a :href="'http://localhost:8080/#/gongdan/?pid='+data.id">{{data.name}}</a>
                    <!-- <div :class="[data.id==0 ? 'root': '', 'reply']">{{ data.name }}</div> -->
            
                    <ul v-if="data.x && data.x.length>0">
                        <Reply v-for="child in data.x" :key="child.id" :data="child"/>
                    </ul>
                </li>

        </div>
</template>
    
    <script>
    export default {
        name: 'Reply', // 递归组件需要设置 name 属性，才能在模板中调用自己
        props:['data'],
    };
    </script>
    
    <style >
    .reply {
        padding-left: 4px;
        border-left: 1px solid #eee;
    }

    ul {
            padding-left: 40px;
            list-style: none;
        }

        .root { display: none; }

    

    </style>